
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>小事展示列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="https://dcloud.io/hellomui/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="https://dcloud.io/hellomui/css/app.css"/>
    <style>
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }
        .mui-bar,.mui-bar-nav a{
            color: #000;
        }
        .mui-bar{
            background: #fff;
        }
        .mui-title{
            font-size: 16px;
            font-weight: 400;
        }
        .mui-media-body{
            font-size: 14px;
        }
        .mui-ellipsis{
            font-size: 13px;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="goback"></a>
    <h1 class="mui-title">展示列表</h1>
</header>
<div class="mui-content" id="storyList">
    <div class="title">
        您提交的小事说：
    </div>
    <ul class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell mui-media" v-for="story in storyList" @click="progress(story.id)">
            <a class="mui-navigate-right">
                <img class="mui-media-object mui-pull-left" :src="story.pic">
                <div class="mui-media-body">
                    {{story.problem}}
                    <p class='mui-ellipsis'>{{story.programme}}</p>
                </div>
            </a>
        </li>
    </ul>
</div>

</body>
<script src="https://dcloud.io/hellomui/js/mui.min.js"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/ajax/libs/bootstrap-table/bootstrap-table.min.js?v=20200529"></script>
<script src="/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
<script src="/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="/ajax/libs/validate/messages_zh.min.js"></script>
<script src="/ajax/libs/validate/jquery.validate.extend.js"></script>
<script src="/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
<script src="/ajax/libs/bootstrap-table/extensions/export/tableExport.js"></script>
<script src="/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="/ajax/libs/iCheck/icheck.min.js"></script>
<script src="/ajax/libs/layer/layer.min.js"></script>
<script src="/ajax/libs/layui/layui.js"></script>
<script src="/ruoyi/js/common.js?v=4.3.1"></script>
<script src="/ruoyi/js/ry-ui.js?v=4.3.1"></script>
<script> var ctx = "\/"; </script>
<script src="/js/js_api.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var content = new Vue({
        el: '#storyList',
        data: {
            storyList: [],
        },
        created: function (){
            window.jsApi.getUserInfo()
                .then(res => {
                    $.ajax({
                        url: ctx + "story/selectStoryList/"+res.result.KEY_ID,
                        type: "post",
                        dataType: "json",
                        // beforeSend: function () {
                        // $.modal.loading("正在处理中，请稍后...");
                        // },
                        success: function (msg) {
                            // $.modal.closeLoading();
                            // $.modal.enable();
                            // $.modal.msgSuccess('提交成功');
                            content.storyList = msg;
                            for(var i = 0;i < content.storyList.length;i++) {
                                if(content.storyList[i].pic == null || content.storyList[i].pic==""){
                                    content.storyList[i].pic = "https://dcloud.io/hellomui/images/shuijiao.jpg";
                                }
                            }
                        },
                        error: function (msg) {
                            console.log(msg);
                        }
                    });
                })
                .catch(err => {alert(err)});
        },
        methods: {
            goback: function() {
                window.history.back(-1);
            },
            progress: function (id) {
                window.location.href=ctx + "story/progress?id="+id;
            }
        }
    });
</script>
</html>